<template>
  <div class="w100 h100">
    <vxeTB @getData="getData"  :pageconfig="state.pageconfig"
      @query='query' :queryList="options.queryList.querys" 
      :detailListSear="options.queryList.detailListSear"
      @pagechange="pagechange" :tabledata="state.tabledata" :tableheads="options.tableheads" :data-url="options.dataUrl"
      :loading="state.loading" :expandFixed="options.expandFixed" :listSS="options.listSS"
      @cellClickEvent="cellClickEvent" :showCaozuo="showCaozuo" :allData="state.allData"
      :queryTitle="options.queryList.queryTitle" :refreshShow="options.refreshShow" 
      @saveSetpageStyle="saveSetpageStyle"
      :refreshTime="state.refreshTime" ref="vxe" :ismergethead="options.ismergethead"
      @filterChangeEvent="filterChangeEvent" 
      :topbottomNum="options.topbottomNum" @printDataClick="printDataClick" 
      @downLoadDataClick="printDataClick"
      :noprintDownShow="noprintDownShow"
      :descQuery="descQuery" :tableHeightChange="tableHeightChange">
      <template v-slot:selectName>
        <slot name="selectNamelist"></slot>
      </template>
      <template v-slot:content="row">
        <slot name="expandFixed" :row="row"></slot>
      </template>
      <template v-slot:opraCurdBtnAll>
        <slot name="opraCurdBtnAll"></slot>
      </template>
      <template v-slot:opraCurdBtn="row">
        <div :class="{ slotStyle: settingsStore.isDark }">
          <slot name="opraCurdBtnlist" :row="row"></slot>
        </div>
      </template>
      <template v-slot:listSS="{ row, field }">
        <slot name="listSS" :row="row" :field="field"></slot>
      </template>
      <template v-slot:listSSfilter="{ row, field }">
        <slot name="listSSfilter" :row="row" :field="field"></slot>
      </template>
         <template v-slot:tableHeightChange>
        <slot name="tableHeightChange"></slot>
      </template>
    </vxeTB>
  </div>
</template>
<script>
import vxeTB from "./vxeTB"
import querybox from "./querybox"
import {
  onMounted,
  reactive,
  computed,
  ref,
  onUnmounted
} from "vue";
import axios from "@/utils/request";
import dayjs from "dayjs";
import {
  useRouter
} from "vue-router";
import {
  useStore
} from "vuex";
import _ from 'lodash'
import useSettingsStore from '@/store/modules/settings'
import usePagesStore from "@/store/modules/pages";
const settingsStore = useSettingsStore()
export default {
  props: {
    tableHeightChange:{
      default: () => false,
      type: Boolean
    },
    descQuery: {
      default: () => undefined,
      type: Object
    },
    noprintDownShow: {
      default: () => false,
      type: Boolean
    },
    showCaozuo: {
      default: () => false,
      type: Boolean
    },
    showduoyulan: {
      default: () => false,
      type: Boolean
    },
    options: {
      type: Object,
      default: () => {
        return {
          tableheads: [],
          queryList: {
            //下拉接口
            dropdownUrl: '',
            //select需要加options
            querys: [],
            //查询关键字-下拉列表 映射关系
            queryMap: new Map()
          },
          // 数据接口
          dataUrl: '',
        }
      }
    },
    dataHandle: {
      type: Function,
      default: i => i
    }
  },
  components: {
    vxeTB,
    querybox
  },
  setup({
    options
  }, {
    emit,
    props
  }) {
    let itv = null
    let vxe = ref(null)
    const store = useStore()
    const router = useRouter()
    let state = reactive({
      loading: false,
      tabledata: [],
      pageconfig: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      records: [],
      allData: [],
      obj: {},
      refreshTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),//获取刷新时间
      itv: null
    })
    let heads_filter = computed(() => {
      return options.tableheads.filter((item) => {
        return !item.disabled
      })
    })
    function cellClickEvent(row) {
      emit('cellClickEvent', row)
    }
    function filterChangeEvent(val) {
      emit("filterChangeEvent", val);
    }
    onMounted(() => {
    })
    onUnmounted(() => {
      clearInterval(state.itv)
    })
    return {
      filterChangeEvent,
      cellClickEvent,
      state,
      store,
      vxe,
      heads_filter,
      props,
      settingsStore
    }
  },
  methods: {
    printDataClick(type) {
      let querykeywords = {}
      if (this.descQuery) {
        querykeywords = this.descQuery
      } else {
        this.options.queryList.querys.forEach((item) => {
          if (item.binddata && item.field === 'time') {
            querykeywords.queryStartTime = dayjs(item.binddata[0]).format('YYYY-MM-DD HH:mm:ss')
            querykeywords.queryEndTime = dayjs(item.binddata[1]).format('YYYY-MM-DD HH:mm:ss')
          }
          if (item.binddata && item.type == 'datetimestartEnd') {
            querykeywords[item.fieldsearch[0]] = dayjs(item.binddata[0]).format('YYYY-MM-DD HH:mm:ss.000')
            querykeywords[item.fieldsearch[1]] = dayjs(item.binddata[1]).format('YYYY-MM-DD HH:mm:ss.000')
            delete item.field
          }
          if (item.binddata && item.type == 'inputrange') {
            querykeywords[item.fieldsearch[0]] = item.binddata[0]
            querykeywords[item.fieldsearch[1]] = item.binddata[1]
            delete item.field
          }
          if (item.fieldsearch) {
            if (item.binddata && item.type == 'cascaderRadioSpecial') {
              querykeywords[item.fieldsearch[0]] = item.binddata1[0]
              querykeywords[item.fieldsearch[1]] = item.binddata1[1]
              querykeywords[item.fieldsearch[2]] = item.binddata1[2]
            }
            delete item.field
          } else {
            querykeywords[item.field] = item.binddata
          }
          delete querykeywords.time
        })
      }
      this.getAllData(querykeywords)
    },
    pagechange(e) {
      this.state.pageconfig.currentPage = e.currentPage
      this.state.pageconfig.pageSize = e.pageSize
      if (this.options.queryList.autoSearch) {
        this.$emit('pagechange')
      } else {
        this.getData()
      }
    },
    query(type) {
      if (type == 3) {
      } else if (type == 1) {
        this.state.pageconfig.currentPage = 1
        this.state.pageconfig.pageSize = 10
        this.getData()
        this.$emit('query', type)
      } else if (type == 2) {
        this.state.pageconfig.currentPage = 1
        this.state.pageconfig.pageSize = 10
        this.getData()
        this.$emit('query', type)
      } else {
        this.$emit('query', type)
      }
    },

    getData(descObj) {
      this.state.loading = true
      let postOBJ = {}
      let querykeywords = {}
      let isError = false
      this.options.queryList.querys.forEach((item) => {
        if (item.binddata && item.field === 'time') {
          querykeywords.queryStartTime = dayjs(item.binddata[0]).format('YYYY-MM-DD HH:mm:ss')
          querykeywords.queryEndTime = dayjs(item.binddata[1]).format('YYYY-MM-DD HH:mm:ss')
        }
        if (item.binddata && item.type == 'datetimestartEnd') {
          querykeywords[item.fieldsearch[0]] = dayjs(item.binddata[0]).format('YYYY-MM-DD HH:mm:ss.000')
          querykeywords[item.fieldsearch[1]] = dayjs(item.binddata[1]).format('YYYY-MM-DD HH:mm:ss.000')
          delete item.field
        }
        if (item.binddata && item.type == 'inputrange') {
          querykeywords[item.fieldsearch[0]] = item.binddata[0]
          querykeywords[item.fieldsearch[1]] = item.binddata[1]
          delete item.field
        }
        if (item.fieldsearch) {
          if (item.binddata && item.type == 'cascaderRadioSpecial') {
            querykeywords[item.fieldsearch[0]] = item.binddata1[0]
            querykeywords[item.fieldsearch[1]] = item.binddata1[1]
            querykeywords[item.fieldsearch[2]] = item.binddata1[2]
          }
          delete item.field
        } else {
          querykeywords[item.field] = item.binddata
        }
        delete querykeywords.time
      })
      if (!isError) {
        postOBJ = {
          ...descObj,
          ...querykeywords,
          pageNum: this.state.pageconfig.currentPage,
          pageSize: this.state.pageconfig.pageSize,
        }
        if (this.options.flag) {
          postOBJ.flag = this.options.flag
        }
        this.$emit('query', {
          type: 'topConnectBom', data: {
            ...descObj,
            ...querykeywords
          }
        })
        axios.post(this.options.dataUrl, postOBJ).then((res) => {
          if (res.code == 200) {
            this.state.loading = false
            if (res.data.list && res.data.list.length > 0 && res.data.list != null) {
              this.state.tabledata = this.dataHandle(res.data.list) || this.dataHandle(res.data)
              this.state.pageconfig.total = res.data.total
            } else if (res.data.length > 0 && res.data != null) {
              this.state.tabledata = this.dataHandle(res.data)
            } else {
              this.state.pageconfig.total = 0
              this.state.tabledata = []
            }
          }
        }).catch(() => {
          this.state.tabledata = []
          this.state.loading = false
        })
      }
    },
    // 获取列表全部数据
    async getAllData(obj) {
      if (obj) {
        this.state.obj = obj
      }
      await axios.post(this.options.dataUrl, this.state.obj).then((res) => {
        if (res.code == 200) {
          this.state.allData = res.data.list
        }
      })
    },
    // 获取列表设置里面的数据
    saveSetpageStyle(data) {
      if (this.options.refreshShow && data.refresh) {
        this.state.itv = setInterval(() => {
          this.getData()
          this.state.refreshTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
        }, data.timeInterval * 1000);
      } else {
        clearInterval(this.state.itv)
      }
    }
  },
  watch: {

  },
  mounted() {
    if (this.options.queryList.autoSearch) {//存在不调接口
      return
    } else {
      this.getData()
    }
  }
}
</script>
<style lang="scss">
.btns {
  display: flex;
  justify-content: space-between;
}

.slotStyle {
  display: flex;
  justify-content: space-between;
  color: #fff;
  .listInfoBtn {
    color: rgba(62, 70, 79, 1);
  }
}

.formstyle {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
}

.el-select__tags {
  span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.topleft {
  margin-top: 20px;
  margin-left: 20px
}
</style>